<template>
  <div id="userList">

    <div class="sech clearfix" :UserListData="UserListData">
      <div class="title">
        <div class="left "><span class="el-icon-setting set"></span><span class="titleCo">{{title}}</span></div>
        <div class="right" style="text-align: right;border-bottom: 0px;">
          <el-button type="primary" size="small" class="sub el-icon-plus" @click="goChart"> 添加新闻 </el-button>
          <el-button   class="sub" size="small"  style="margin-right: 20px;"> 删除 </el-button>
        </div>
        <div class="cleae"></div>
      </div>
       <div  style="width: 100%;margin-bottom: 25px;" :updateStatusData="updateStatusData">
         <el-select v-model="fromData.status" placeholder="新闻状态">
           <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
           </el-option>
         </el-select>
         <el-select v-model="fromData.type" placeholder="新闻类型">
           <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value">
           </el-option>
         </el-select>
        <el-input class="saechIput"  v-model="account" placeholder="新闻标题"></el-input>
        <el-button type="primary" class="saechBout"  icon="el-icon-search" v-on:click="saechFn(1)"> </el-button>
      </div>
      <div class="tableBox">
        <el-dialog :title="languageData.admin.ResetPassword" :visible.sync="dialogFormVisible" style="text-align: left">
          <el-form :label-position="labelPosition" :label-width="languageData.id=='Chinese'?'100px':'150px'" :model="fromData" :rules="languageData.id=='Chinese'?rules:rules2" ref="fromData">
            <el-form-item :label="languageData.from.label.NewPassword" prop="password">
              <el-input v-model="fromData.password" type="password"></el-input>
            </el-form-item>
            <el-form-item :label="languageData.from.label.confirmPassword" prop="passwordTow">
              <el-input v-model="fromData.passwordTow" type="password"></el-input>
            </el-form-item>
            <el-form-item label="">
              <div style="text-align: right">
                <el-button @click="resetFields()">{{languageData.public.cancel}}</el-button>
                <el-button type="primary" @click="submitForm('fromData')">{{languageData.public.done}}</el-button>
              </div>
            </el-form-item>
          </el-form>
        </el-dialog>
        <el-table :data="tableData2" style="width: 100%" :row-class-name="tableRowClassName" :row-style="style1"  :header-row-style="style2">
          <el-table-column prop="da" label=" " width="20">
          </el-table-column>
          <el-table-column prop="title" label="新闻标题" >
          </el-table-column>
          <el-table-column prop="typeText" label="新闻类型" >
          </el-table-column>
          <el-table-column prop="statusText" label="新闻状态" >
          </el-table-column>
          <el-table-column prop="creatTmie" label="创建时间" >
          </el-table-column>
          <el-table-column prop="userId" label="操作" >
            <template slot-scope="scope">
            <span class="clickBot" @click="handleEdit(scope.$index, scope.row)">
              <span class="el-icon-edit-outline"></span>
              <span>编辑</span>
            </span>
            <span class="clickBot"  v-show="scope.row.status !=2" @click="delUserfn(scope.$index, scope.row,2)" style="margin-left: 20px;">
              <span class="el-icon-delete"></span>
              <span> 删除 </span>
            </span>
              <span class="clickBot" v-show="scope.row.status !=1" @click="delUserfn(scope.$index, scope.row,1)"  style="margin-left: 20px;">
              <span class="el-icon-printer"></span>
              <span> 发布 </span>
            </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="" style="">
        <el-pagination layout="prev, pager, next" :page-count="page.count" @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </div>
    <el-dialog :title="languageData.admin.DeleteAccount" :visible.sync="dialogVisible2" width="30%" ><span>{{delText}}</span><span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible2 = false">{{languageData.public.cancel}}</el-button>
    <el-button type="primary" @click="delFn">{{languageData.public.done}}</el-button>
  </span>
    </el-dialog>
  </div>
</template>
<style scoped>
  #userList{max-width: 1690px;padding-top: 5px;text-align: left}
  .saechIput{width: 392px;margin-right: 0px;position: relative;z-index: 10;border: none 0px}
  .saechBout{border-radius: 0px 4px 4px 0px;position: relative; left: -7px;z-index: 11;font-size: 14px;font-weight: bold;width: 60px;text-align: center}
  .saechBout:hover{background-color: #409eff;border-color: #409eff}
  .saechBout{background-color: #0e72b9; border-color: #0e72b9 }
  .bot{ width: 120px;text-align: center}
  .check{background-color: #0d71b7;margin-right: 60px;}
  .success-row {  background: #d9dddd;  }
  .tableBox{width: 100%;min-height: 200px;margin-top: 25px;}
  .clickBot{cursor: pointer;}
  .clickBot:hover{color:#409eff }
  .sub{cursor: pointer ;position: relative;top: -3px;}
  .set{margin-right: 10px;font-size: 24px;}
  .title{text-align: left;line-height: 50px;border-bottom: 1px solid #FFF;margin-bottom: 10px; font-size: 24px}
  .titleCo{font-size: 20px }
</style>
<script>
  import UserImg from '../../../../static/img/icon/userDeFilt.png'
  import {mapState, mapActions} from 'vuex'
  import Public from '../../../vuex/public.js'
  export default {
    name: 'my-usrList',
    data () {
      // 自定义密码校验
      var indeofPassword = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.fromData.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      var indeofPassword2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('confirm password'));
        } else if (value !== this.fromData.password) {
          callback(new Error('Your new passwords do not match!'));
        } else {
          callback();
        }
      };
      return {
        delText:"",
        title: '新闻管理',
        user: {
          imgUlr: UserImg, // 账号图片
          name: '小明管理员'
        },
        userSaech: null,
        page:{
          page: 1,
          pageSize: 10,
          count: 1
        },
        dialogFormVisible: null,
        dialogVisible2: false,
        tableData2: [],
        style1: {height: '70px'},
        style2: {height: '70px', border: 'none 0px', background: '#d9dddd', 'margin-top': '25px'},
        account:'',
        fromData: {
          id: null,
          status:'',
          type:'',
        },
        rules: {
          password: [
            { required: true, message: '请输入新密码', trigger: 'blur' },
          ],
          passwordTow: [
            { required: true, message: '请确认新密码', trigger: 'blur' },
            { validator: indeofPassword, trigger: 'blur' }
          ]
        },
        rules2: {
          password: [
            { required: true, message: 'Please confirm your new password', trigger: 'blur' },
          ],
          passwordTow: [
            { required: true, message: 'confirm password', trigger: 'blur' },
            { validator: indeofPassword2, trigger: 'blur' }
          ]
        },
        labelPosition: 'left',
        options: [{
          value: '',
          label: '全部状态'
        },{
          value: 0,
          label: '新建'
        }, {
          value: 1,
          label: '发布'
        },{
          value: 2,
          label: '删除'
        }],
        option: [{
          value: '',
          label: '公告/新闻'
        },{
          value: 2,
          label: '公告'
        }, {
          value: 1,
          label: '新闻'
        }],
      }
    },
    methods: {
      ...mapActions({
        delUser: 'delUserList',
        showNewsList: 'showNewsList',
        resetPassword: 'resetPassword',
        deleteNews:'updateNewsStatus'
      }),
      tableRowClassName ({row, rowIndex}) {
        var x = rowIndex % 2
        if (x === 0) {
          return ''
        } else if (x === 1) {
          return 'success-row'
        }
        return ''
      },
      handleCurrentChange (val) {
        this.page.page = parseInt(val)
         this.saechFn()
      },
      login () {
        this.$router.push({ name: "map" })
      },
      saechFn(a){
        if(a){
          this.page.page = 1
        }
        var parm = {
          status:this.fromData.status,

          page: this.page.page,
          pageSize: this.page.pageSize,
        }
        if(this.account){
          parm.title=this.account
        }
        if(this.fromData.type || this.fromData.type==0){
          parm.type=this.fromData.type
        }
        this.showNewsList(parm)
      },
      updateListFn(res){
        if (res.body.count) {
          var cunt = res.body.count
          // 取整
          this.page.count = Math.ceil(cunt / this.page.pageSize)
        }
        res = res.body.data
        this.tableData2 = []
        var time = Public.publicLo.timeCheng()
        for (let i in res) {
          if(res[i].creatTmie){
            time = Public.publicLo.timeCheng(res[i].creatTmie)
          }
          var pu = {
            id: res[i].id,
            title: res[i].title,
            type:res[i].type,
            typeText: res[i].type==1?'普通新闻':'公告',
            creatorId:res[i].creatorId,
            status:res[i].status,
            creatTmie: time.times,
            statusText: res[i].status==0?'新建': res[i].status==1?'发布':res[i].status==2?'删除':'异常'
          }
          this.tableData2.push(pu)
        }
      },
      // 操作
      handleEdit (index, row) {
        // this.dialogFormVisible = true;
        this.fromData.id = row.id
        this.$router.push({ name: 'adminchart',query:{nwesId:row.id,id:this.$route.name}})
      },
      // 取消
      resetFields(){
        this.dialogFormVisible = false;
        this.$refs['fromData'].resetFields()
      },
      // delUser
      delUserfn (index, row,status) {
        this.dialogVisible2 = true;
        this.fromData.id = row.id
        this.fromData.status = status
        this.delText = status==2? '确定删除该条新闻?':status==1?'发布改条新闻':''
      },
      delFn(status){
        var parm = {
          id: this.fromData.id+'',
          status:this.fromData.status
        }
        this.dialogVisible2 = false
        this.deleteNews(parm)
      },
      // 操作是否成功
      listStatus (res) {
        if(res=='out'|| res=='outErorr'){
          return
        }
        if (res.status == 0) {
          // 修改成功
          var text = '操作成功';
            this.openSuccess(text);
            // 刷新列表
            var parm = {
              status:this.fromData.status,
              page: this.page.page,
              pageSize: this.page.pageSize,
            }
          if(this.account){
            parm.title=this.account
          }
            this.showNewsList(parm)
        }
        if (res.status != 0) {
          // 修改 修改失败
          var text = res.message
          this.openError(text)
        }
        // 清空 vuex 中的本次记录，以免被下次操作状态造成混淆
        this.$store.commit('updateStatusTo', {body: null})
      },
      // 重置密码
      updatePaswordFn () {
         var parm = {
           userId: this.fromData.userId,
           password: this.fromData.password
         }
         this.resetPassword(parm);
         this.dialogFormVisible = false
      },
      // 表单验证按钮
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.updatePaswordFn()
          } else {
            return false
          }
        })
      },
      goChart(){
        this.$router.push({ name: 'adminchart',query:{id:this.$route.name}})
      },
      openSuccess (text) {
        this.$message({
          message: text,
          type: 'success'
        })
      },
      openError (text) {
        this.$message.error(text)
      }
    },
    computed: {
      UserListData: function () {
        var parm = this.updateList;
        if (parm) {
          this.updateListFn(parm)
        }
        return 1
      },
      updateStatusData: function () {
        var parm = this.updateStatus
        if (parm) {
          this.listStatus(parm)
        }
        return 1
      },
      languageData: function () {
        var parm = this.language
        if (parm) {
          if (parm.check == 'Chinese') {
            parm = parm.Chinese
          }
          if (parm.check == 'English') {
            parm = parm.English
//            this.formConfig.labelWidth = '200px'
//            dom.style = 'width:620px'
          }
          // 替换 其他交互数据
//          this.updateDate(parm)
        }
        return parm
      },
      ...mapState([
        'addOderData',
        'language',
        'updateList',
        'updateStatus'
      ])
    },
    mounted () {
      // 配置顶部菜单
      var parm = {
        status:this.fromData.status,
        //title:this.account,
        page: this.page.page,
        pageSize: this.page.pageSize,
      }
      this.showNewsList(parm)
    },
    components: {
    }
  }
</script>

